//找元素
let register = document.querySelector('.register')
//用户名
let username = document.querySelector('#userName')
username.onblur = validUsername
//密码
let password = document.querySelector('#password')
password.onblur = validpassword
//输入真实姓名
let realName = document.querySelector('#realName')
realName.onblur = validrealName

//性别
let gender = document.querySelectorAll('.gender')
gender[0].onclick = validGender
gender[1].onclick = validGender
//爱好
let hobby = document.querySelectorAll('[type=checkbox]')
for (let i = 0; i < hobby.length; i++) {
    //onclick回调函数返回false时，无法修改checked状态，建议使用change事件  
    hobby[i].onchange = validHobby
}
//生日
let birthday = document.querySelector('#birthday')
birthday.onblur = validBirthday
//电话
let phone = document.querySelector('#phone')
phone.onblur = validPhone
//邮箱
let email = document.querySelector('#email')
email.onblur = Email
//个人评价
let resume = document.querySelector('#resume')
resume.onblur = Resume
//创建验证码图片
let verifyCode = new GVerify('random')
let reRandom = document.querySelector('#reRandom')
reRandom.onblur = validCode
//头像
let pic = document.querySelector('#pic')
pic.onchange = validPic
//ID
let identityNo = document.querySelector('#identityNo')
identityNo.onchange = validID

//提交
register.onsubmit = function () {
    validUsername()
    validpassword()
    validrealName()
    validGender()
    validHobby()
    validBirthday()
    validPhone()
    Email()
    Resume()
    validCode()
    validPic()
    validID()
    return false
}


/**
 * 2验证用户名  要么都是汉字2-16位，要么都是英文2-30位 非空 唯一
 * @date 2020-10-08
 * @returns {any}
 */
function validUsername() {
    let v = username.value
    let span = username.nextElementSibling
    span.innerHTML = ''
    if (!v || v.trim() === '') {
        span.innerHTML = '用户名不能为空'
        span.style.color = 'red'
        return false
    }
    let reg = /(^[\u4e00-\u9fa5]{2,16}$)|(^[a-zA-Z]{2,30}$)/
    if (reg.test(v) === false) {
        span.innerHTML = '请输入汉字2-16位或英文2-30位'
        span.style.color = 'red'
        return false

    }
    span.innerHTML = '用户名正确'
    span.style.color = 'green'
    return false
}


/**
 * 3验证密码:6-12位非空，必须包含大写字符，字母开头，非空
 * @date 2020-10-08
 * @returns {any}
 */
function validpassword() {
    let v = password.value
    let span = password.nextElementSibling
    span.innerHTML = ''
    if (!v || v.trim() === '') {
        span.innerHTML = '密码不能为空'
        span.style.color = 'red'
        return false
    }
    let reg = /^[a-zA-Z]$/
    if (!reg.test(v[0])) {
        span.innerHTML = '密码首位必须为字母'
        span.style.color = 'red'
        return false
    }
    reg = /^[A-Z]$/g
    if (!reg.test(v)) {
        span.innerHTML = '密码必须包含大写字母'
        span.style.color = 'red'
        return false
    }
    if (v.length > 12 || v.length < 6) {
        span.innerHTML = '密码长度为6-12位'
        span.style.color = 'red'
        return false
    }
    span.innerHTML = '密码正确'
    span.style.color = 'green'
    return true

}

/**
 * 4.验证姓名：要么都是汉字2-16位，要么都是英文2-30位 非空 唯一
 * @date 2020-10-08
 * @returns {any}
 */
function validrealName() {
    let v = realName.value
    let span = realName.nextElementSibling
    span.innerHTML = ''
    if (!v || v.trim() === '') {
        span.innerHTML = '姓名不能为空'
        span.style.color = 'red'
        return false
    }
    let reg = /(^[\u4e00-\u9fa5]{2,16}$)|(^[a-zA-Z]{2,30}$)/
    if (reg.test(v) === false) {
        span.innerHTML = '请输入汉字2-16位或英文2-30位'
        span.style.color = 'red'
        return false
    }
    span.innerHTML = '姓名输入正确'
    span.style.color = 'green'
    return true

}


/**
 * 验证性别，至少选一个
 * @date 2020-10-08
 * @returns {any}
 */
function validGender() {
    let v = gender[0].checked ? gender[0].value : gender[1].value
    console.log(v)
    let span = gender[1].nextElementSibling
    span.innerHTML = ''
    if (!v) {
        span.innerHTML = '性别至少选一个'
        return false
    }
    span.innerHTML = '性别正确'
    span.style.color = 'green'
    return true

}

/**
 * 6.验证爱好，必须选中一个
 * @date 2020-10-08
 * @returns {any}
 */
function validHobby() {
    let span = document.querySelector('#afterHobby')
    span.innerHTML = ''
    for (let i = 0; i < hobby.length; i++) {
        if (hobby[i].checked) {
            span.innerHTML = '爱好正确'
            span.style.color = 'green'
            return true
        }
    }
    span.innerHTML = '爱好必须选择一个'
    span.style.color = 'red'
    return false

}
/**
 * 生日 非空 不能超过系统时间
 * @date 2020-10-08
 * @returns {any}
 */
function validBirthday() {
    let v = birthday.value
    let span = birthday.nextElementSibling
    span.innerHTML = ''
    if (!v || v.trim() === '') {
        span.innerHTML = '生日不能为空'
        span.style.color = 'red'
        return false
    }
    //构造生日日期对象使用一元加获得毫秒数
    let birth = +new Date(v)
    let now = +new Date()
    if (birth - now > 0) {
        span.innerHTML = '生日不能超过系统时间'
        span.style.color = 'red'
        return false
    }
    span.innerHTML = '生日正确'
    span.style.color = 'green'
    return true
}


/**
 *  8、验证移动电话 非空 符合电话号码规范
 * @date 2020-10-08
 * @returns {any}
 */
function validPhone() {
    let v = phone.value
    let span = phone.nextElementSibling
    span.innerHTML = ''
    if (!v || v.trim() === '') {
        span.innerHTML = '号码不能为空'
        span.style.color = 'red'
        return false
    }
    let reg = /^1[345678]\d{9}$/
    if (reg.test(v) === false) {
        span.innerHTML = '非法的电话号码'
        span.style.color = 'red'
        return false
    }
    span.innerHTML = '正确的电话号码'
    span.style.color = 'green'
    return true
}

/**
 * 9.验证邮箱
 * @date 2020-10-08
 * @returns {any}
 */
function Email() {
    let v = email.value
    let span = email.nextElementSibling
    span.innerHTML = ''
    if (!v || v.trim() === 0) {
        span.innerHTML = '邮箱不能为空'
        span.style.color = 'red'
        return false
    }
    let reg = /^[a-zA-Z0-9]+@[a-zA-Z0-9]{2,}(\.com|\.cn|\.com\.cn|\.org|.net|.edu)$/
    if (!reg.test(v)) {
        span.innerHTML = '非法邮箱'
        span.style.color = 'red'
        return false
    }
    span.innerHTML = '邮箱正确'
    span.style.color = 'green'
    return true
}


/**
 * 验证评论
 * @date 2020-10-08
 * @returns {any}
 */
function Resume() {
    let v = resume.value
    let span = resume.nextElementSibling
    span.innerHTML = ''
    if (!v || v.trim() === '') {
        span.innerHTML = '评价不能为空'
        span.style.color = 'red'
        return false
    }
    if (v.length > 120) {
        span.innerHTML = '评价不能超过120字'
        span.style.color = 'red'
        return false
    }
    span.innerHTML = '评价正确'
    span.style.color = 'green'
    return true
}


/**
 * 验证验证码
 * @date 2020-10-08
 * @returns {any}
 */
function validCode() {
    let v = reRandom.value
    let span = reRandom.nextElementSibling
    span.innerHTML = ''
    //使用图片码和输入字符进行对比验证，正确flag=true 不正确flag=flase
    let flag = verifyCode.validate(v)
    if (flag === false) {
        span.innerHTML = '验证码不正确'
        span.style.color = 'red'
        return flag
    }
    span.innerHTML = '验证码正确'
    span.style.color = 'green'
    return flag

}


/**
 * 验证头像
 * @date 2020-10-08
 * @returns {any}
 */
function validPic() {
    let files = pic.files
    let span = pic.nextElementSibling
    span.innerHTML = ''
    //判断空
    if (!files || files.length === 0) {
        span.innerHTML = '必须上传文件'
        span.style.color = 'red'
        return false
    }
    //判断类型
    let reg = /^jpg|jpeg|png|bmp|webp|gif$/
    //获得后缀
    let type = files[0].type
    console.log(type)
    let index = type.indexOf('/')
    let suffix = type.substring(index + 1)
    console.log(suffix)
    if (reg.test(suffix) === false) {
        span.innerHTML = '请上传图片文件'
        span.style.color = 'red'
        return false
    }
    //获得图片尺寸（byte）
    let size = files[0].size
    let kb5 = 5 * 1024
    if (size > kb5) {
        span.innerHTML = '图片文件大小<=5KB'
        span.style.color = 'red'
        return false
    }
    span.innerHTML = '上传文件正确'
    span.style.color = 'green'
    return true
}

/**
 * 验证身份证 符合国际标准
 * @date 2020-10-08
 * @returns {any}
 */
function validID() {
    let v = identityNo.value
    let span = identityNo.nextElementSibling
    span.innerHTML = ''
    //验证空
    if (!v || v.trim() === '') {
        span.innerHTML = '身份证不能为空'
        span.style.color = 'red'
        return false
    }
    //验证长度
    if (v.length !== 18) {
        span.innerHTML = '身份证长度为18位'
        span.style.color = 'red'
        return false
    }
    //验证前17位是否为数字
    let prefix = v.substring(0, v.length - 1)
    let reg = /^\d{17}$/
    if (!reg.test(prefix)) {
        span.innerHTML = '身份证前17位必须是数字'
        span.style.color = 'red'
        return false
    }
    //验证区位码
    let arr = [
        '11',
        '12',
        '13',
        '14',
        '21',
        '22',
        '23',
        '21',
        '22',
        '23',
        '31',
        '32',
        '33',
        '34',
        '35',
        '36',
        '37',
        '41',
        '42',
        '43',
        '44',
        '45',
        '46',
        '50',
        '51',
        '52',
        '53',
        '54',
        '61',
        '62',
        '63',
        '64',
        '65',
        '81',
        '82',
        '83',
    ]
    //截取前两位
    let areaCode = v.substring(0, 2)
    if (arr.indexOf(areaCode) === -1) {
        span.innerHTML = '身份证前2位区位码不合法'
        span.style.color = 'red'
        return false
    }
    //验证年份
    let year = parseInt(v.substring(6, 10))
    let nowYear = new Date().getFullYear()
    if (year > nowYear || nowYear < 1890) {
        span.innerHTML = '身份证年份必须在[1890-' + nowYear + ']'
        span.style.color = 'red'
        return false
    }
    //验证月份 

}